<template>
  <div class="swiper-container" ref="cur">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="carousel in list" :key="carousel.id">
        <img :src="carousel.imgUrl" />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<script>
//引入轮播图
import Swiper from 'swiper'
export default {
  name: 'Carousel',
  props: ['list'],
  watch: {
    list: {
      immediate: true,
      handler() {
        this.$nextTick(() => {
          //Home页面的轮播图不能在mounted中书写，现在可以了
          //1.第一次书写轮播图的时候，是当前组件内部发送的请求、动态渲染结构，服务器返回的数据还没有回来，导致页面结构没有完全
          //2.现在可以在mounted中写是因为，dispatch请求是在父组件Home中发的，数据通过props传递过来，而且结构已经完成
          var mySwiper = new Swiper(
            //获取轮播图div上的真实DOM元素
            this.$refs.cur,
            {
              loop: true,
              // 如果需要分页器
              pagination: {
                el: '.swiper-pagination',
                //点击小球的时候切换图片
                clickable: true,
              },
              //如果需要前进和后退按钮
              navigation: {
                nextEl: '.swiper-button-next',
                preEl: '.swiper-button-prev',
              },
            }
          )
        })
      },
    },
  },
}
</script>

<style></style>
